<template>
	<view class="deep">
		<scroll-view scroll-y="true" :style="{height: scrollHeight}">
			<view class="m-2  bg-white rounded-20">
				<view class="d-flex j-sb px-3 a-center clazz">
					<view class="py-2">
						名称<text class="text-red">*</text>
					</view>
					<view class="py-2 flex-1">
						<input class="flex-1 text-right" v-model="goods_name" placeholder="输入商品名称" placeholder-class="font-md"  @input="name_input" name="" id="" maxlength="59"></textarea>
					</view>
				</view>
			</view>
			
			<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3" v-if="userinfo.is_merchant">
					<view class="border-bottom clazz d-flex j-sb a-center" @click="goodsClass">
						<view class="">平台分类</view>
						<view class="d-flex a-center j-center mr-2">
							<text class="mr-2 mr-1 text-light-muted">{{clazzList.cat_name==null?"选择分类":clazzList.cat_name}}</text>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>
					</view>
					<view class=" clazz  d-flex j-sb a-center" @click="goodsShop">
						<view class="">店铺分类</view>
						<view class="d-flex a-center j-center mr-2" v-if="shopList.cat_name==null">
							<text class="mr-2  mr-1 text-light-muted">{{shopList.cat_name==null?"选择分类":shopList.cat_name}}</text>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>
						<view class="w-50 d-flex a-center j-end mr-2" v-else>
							<view class="mr-2 mr-1 text-light-muted" style="width: 80%;">
								<text class="ellipsis-1 text-right">{{shopList.cat_name}}</text>
							</view>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>	
					</view>
				</view>
				<view class="ml-3" v-else>
					<view class="clazz d-flex j-sb a-center" @click="goodsClass">
						<view class="">平台分类</view>
						<view class="d-flex a-center j-center mr-2">
							<text class="mr-2 mr-1 text-light-muted">{{clazzList.cat_name==null?"选择分类":clazzList.cat_name}}</text>
							<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
			<view class="mx-2 mb-2 bg-white rounded-20">
				<view class="ml-3">
					<view class="border-bottom a-center  py-3 d-flex j-sb clazz">
						<view class="">商品货号</view>
						<view class="mr-3">
							<input type="text"  class="text-right" placeholder="输入商品货号" v-model="goods_sn"  placeholder-class="mr-2 d-flex j-end" @input="sn_input" />
						</view>
					</view>
					<view class=" py-3 a-center border-bottom d-flex j-sb clazz">
						<view class="">单位条形码</view>
						<view class="mr-3 flex-1 d-flex j-end a-center">
							<input type="text" placeholder="请输入条形码" class="mr-2 text-right" v-model="scancode" @input="scan_input" />
							<u-icon name="scan" @click="scanCode" color="#222222" size="50"></u-icon>
						</view>
					</view>
					<view class=" py-3 a-center  d-flex j-sb clazz">
						<view class="">商品单位</view>
						<view class="mr-3">
							<input type="text" class="text-right" placeholder="输入商品单位" v-model="goods_units" placeholder-class="mr-2 d-flex j-end" @input="units_input" />
						</view>
					</view>
				</view>
			</view>
			
			<view class="m-2  bg-white rounded-20">
				<view class="d-flex j-sb px-3  a-center clazz">
					<view class="py-2">库存</view>
					<view class="py-2 flex-1">
						<input class="flex-1 text-right" v-model="stock" placeholder="输入商品库存" placeholder-class="font-md"  @input="stock_input" name="" id="" maxlength="59"></textarea>
					</view>
				</view>
			</view>
			
			<view class="m-2 pl-3 bg-white rounded-20">
				<view class="d-flex pr-3 j-sb border-bottom clazz a-center">
					<view class="py-2">商品关键字</view>
					<view class="py-2 flex-1">
						<input class="flex-1 text-right" v-model="goods_keywords" placeholder="输入商品关键字" placeholder-class="font-md"  @input="keywords_input" name="" id="" maxlength="59"></textarea>
					</view>
				</view>
				<view class="d-flex pr-3 j-sb clazz a-center">
					<view class="py-2">商品简单描述</view>
					<view class="py-2 flex-1">
						<input class="flex-1 text-right" v-model="goods_brief" placeholder="最多输入60个字符" placeholder-class="font-md"  @input="brief_input" name="" id="" maxlength="59"></textarea>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="footer"></view>
		<!-- <image-cropper :src="tempFilePath" @confirm="confirm" @cancel="cancel"></image-cropper> -->
		<view class="bg-white release  py-2 w-100 position-fixed bottom-0" >
			<button type="warn" @click="next_sub">下一步</button>
		</view>
		<!-- 平台分类 -->
		<u-popup @close="clazz_popup" v-model="terrace" width="100%" height="80%" mode="bottom" border-radius="14" :closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
			<view class="">
				<view class="eradders"></view>
				<view class="eradders position-fixed top-0  w-100 bg-white">
					<view class="py-2">
						<view class="font-md d-flex j-center a-center font-35">选择平台商品分类</view>
					</view>
					<view class="d-flex address" >
						<view class="py-3 mx-2" :class="one_show?'active_tab':''"  v-if="terrace_name" @click="one_tab(items_clazz)">
							<view  class="font-weight" >{{terrace_name}}</view>
						</view>
						<view class="py-3 mx-2" :class="two_show?'active_tab':''" v-if="terrace_one_name" @click="two_tab(items_clazz)">
							<view class="font-weight">{{terrace_one_name}}</view>
						</view>
						<view class="py-3 mx-2" :class="three_show?'active_tab':''" v-if="terrace_two_name" @click="three_tab">
							<view class="font-weight">{{terrace_two_name}}</view>
						</view>
						<view class="ml-2 py-3 active_tab" v-if="please">请选择</view>
					</view>
				</view>
				<!-- 一级 -->
				<view v-show="terrace_one"  class="content_address mx-2 pt-4" v-for="(item,index) in oneClazz" :key="index" @click="clazz_one(item)">
						{{item.cat_name}}
				</view>
				<!-- 二级 -->
				<view v-show="terrace_two" class="content_address mx-2 pt-4" v-for="(item,index) in twoClazz" :key="index" @click="clazz_two(item)">
						{{item.cat_name}}
				</view>
				<!-- 三级 -->
				<view v-show="terrace_three" class="content_address mx-2 pt-4 d-flex j-sb" v-for="(item,index) in threeClazz" :key="index" @click="clazz_three(item)">
					<view class="" :class="item.cat_id==threeCatId?'active':''" >
						{{item.cat_name}}
					</view>
					<view class="" v-show="item.cat_id==threeCatId">
						<u-icon name="checkmark" color="#ff1515" size="33"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 店铺分类 -->
		<u-popup @close="shopList_popup" v-model="shopping" width="100%" height="80%" mode="bottom" border-radius="14" :closeable="true" close-icon="close" close-icon-pos="top-right" close-icon-size="40">
			<view class="">
				<view class="eradders"></view>
				<view class="eradders position-fixed top-0 w-100 bg-white">
					<view class="py-2">
						<view class="font-md d-flex j-center a-center font-35">选择店铺商品分类</view>
					</view>
					<view class="d-flex address" >
						<view class="py-3 mx-2"  :class="shop_one_show?'active_tab':''" v-if="shopping_name" @click="shop_one_tab(items_shopping)">
							<view  class="font-weight" >{{shopping_name}}</view>
						</view>
						<view class="py-3 mx-2"  :class="shop_two_show?'active_tab':''" v-if="shopping_one_name" @click="shop_two_tab(items_shopping)">
							<view class="font-weight">{{shopping_one_name}}</view>
						</view>
						<view class="py-3 mx-2" :class="shop_three_show?'active_tab':''" v-if="shopping_two_name" @click="shop_three_tab(items_shopping)">
							<view class="font-weight">{{shopping_two_name}}</view>
						</view>
						<!-- !shop_three_show&& -->
						<view class="ml-2 py-3 active_tab" v-if="select">请选择</view>
					</view>
				</view>
				<!-- 一级 -->
				<view v-show="shopping_one" class="content_address mx-2 pt-4" v-for="(item,index) in oneShopping" :key="index" @click="shop_one(item)">
						{{item.cat_name}}
				</view>
				<!-- 二级 -->
				<view v-show="shopping_two" class="content_address mx-2 pt-4" v-for="(item,index) in twoShopping" :key="index" @click="shop_two(item)">
						{{item.cat_name}}
				</view>
				<!-- 三级 -->
				<view v-show="shopping_three" class="content_address mx-2 pt-4 d-flex j-sb" v-for="(item,index) in threeShopping" :key="index" @click="shop_three(item)">
					<view class="" :class="item.cat_id==shop_threeCatId?'active':''" >
						{{item.cat_name}}
					</view>
					<view class="" v-show="item.cat_id==shop_threeCatId">
						<u-icon name="checkmark" color="#ff1515" size="33"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"/>
	</view>
</template>

<script>
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	import sPopup from '../../components/s-popup/index.vue';
	export default {
		components: {
			ImageCropper,
			sPopup
		},
		data() {
			return {
				userinfo:"", // 用户信息
				checked:true,
				shopList:{}, // 商家分类
				clazzList:{}, // 商品分类
				goods_name:"",// 名字
				goods_sn:'', // 商品货号
				bar_code:'', // 商品条形码
				goods_units:'', // 商品单位
				stock:"" ,// 库存
				goods_keywords:"", // 商品关键字
				goods_brief:'', // 商品描述
				scancode:"", // 条形码
				
				
				terrace:false, // 平台分类
				shopping:false ,// 店铺分类
				
				terrace_one:true,
				terrace_two:false,
				terrace_three:false,
				terrace_name:"", // 平台分类切换
				terrace_one_name:"", // 平台分类切换
				terrace_two_name:"", // 平台分类切换
				terraceClazz:[], // 全部列表
				oneClazz:[], // 1级平台分类
				twoClazz:[], // 2级平台分类
				threeClazz:[], // 3级平台分类
				subCatId:"", // cat_id标识符
				threeCatId:"", // 二级cat_id
				one_show:false,
				two_show:false,
				three_show:false,
				items_clazz:"",
				please:true,
				
				shopping_one:true,
				shopping_two:false,
				shopping_three:false,
				shopping_name:"", // 平台分类切换
				shopping_one_name:"", // 平台分类切换
				shopping_two_name:"", // 平台分类切换
				shoppingClazz:[], // 全部列表
				oneShopping:[], // 1级平台分类
				twoShopping:[], // 2级平台分类
				threeShopping:[], // 3级平台分类
				shop_subCatId:"", // cat_id标识符
				shop_threeCatId:"", // 二级cat_id
				shop_one_show:false,
				shop_two_show:false,
				shop_three_show:false,
				items_shopping:"",
				select:true,
				scrollHeight:0, // 屏幕高度
				
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.footer').boundingClientRect()
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom + 'px';
					})
				}
			})
		},
		methods: {
			scanCode(){
				let that=this
				console.log(that.scancode)
				uni.scanCode({
				    // scanType: ['barCode'],
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
						that.scancode=res.result
				    }
				});
			},
			scan_input(e){
				this.scancode=e.detail.value
			},
			// 商品分类
			goodsClass(){
				this.terrace=true
				if(this.items_clazz){
					this.please=false
					this.oneClazz=[]
				}else{
					this.please=true
				}
				this.terrace_one=true
			},
			// 店铺商品分类
			goodsShop(){
				this.shopping=true
				if(this.items_shopping){
					this.select=false
					this.oneShopping=[]
				}else{
					this.select=true
				}
				this.shopping_one=true
			},
			// 商品分类一级
			clazz_one(item){
				this.items_clazz=item
				this.terrace_name=item.cat_name
				// 二级
				let cat_id_one=""
				cat_id_one=this.terraceClazz.filter((v,index)=>{
					if(item.cat_id==v.parent_id){
						return v
					}
				})
				if(cat_id_one.length==0){
					this.twoClazz=this.terraceClazz.filter((v,index)=>{
						if(item.cat_id==v.parent_id){
							return v
						}
					})
					this.one_show=true
					this.terrace_one=true
					this.terrace=false
					this.please=false
				}else{
					this.please=true
					this.twoClazz=cat_id_one
					this.terrace_one=false
					this.terrace_two=true
					this.one_show=false
				}
			},
			// 商品分类二级
			clazz_two(item){
				this.items_clazz=item
				this.terrace_one_name=item.cat_name
				// 三级
				let cat_id_two=""
				cat_id_two=this.terraceClazz.filter((v,index)=>{
					if(item.cat_id==v.parent_id){
						return v
					}
				})
				if(cat_id_two.length==0){
					this.threeClazz=this.terraceClazz.filter((v,index)=>{
						if(item.cat_id==v.parent_id){
							return v
						}
					})
					this.terrace_two=true
					this.one_show=false
					this.two_show=true
					this.terrace_one=false
					this.please=false
					this.terrace=false
				}else{
					this.please=true
					this.threeClazz=cat_id_two
					this.terrace_two=false
					this.terrace_three=true
					this.one_show=false
					this.two_show=false
				}
				console.log(this.threeClazz,item)
			},
			// 商品分类三级
			clazz_three(item){
				this.items_clazz=item
				this.three_show=true
				this.threeCatId=item.cat_id
				this.terrace_two_name=item.cat_name
				this.terrace=false
				this.please=false
			},
			// 切换一级
			one_tab(items_clazz){
				this.terrace_one=true
				this.terrace_two_name=""
				this.terrace_one_name=""
				this.three_show=false
				this.twoClazz=[]
				this.threeClazz=[]
				// 一级
				this.oneClazz=this.terraceClazz.filter((item,index)=>{
					if(item.parent_id==0){
						return item
					}
				})
				let cat_id_two=""
				cat_id_two=this.terraceClazz.filter((v,index)=>{
					if(items_clazz.cat_id==v.parent_id){
						return v
					}
				})
				if(cat_id_two.length==0){
					this.please=false
				}else{
					this.please=true
				}
			},
			// 切换二级
			two_tab(items_clazz){
				this.terrace_one=false
				this.terrace_three=false
				this.three_show=false
				this.terrace_two=true
				this.terrace_two_name=""
				
				let cat_id_two=""
				cat_id_two=this.terraceClazz.filter((v,index)=>{
					if(items_clazz.cat_id==v.parent_id){
						return v
					}
				})
				if(cat_id_two.length==0){
					this.please=false
				}else{
					this.please=true
				}
			},
			clazz_popup(){
				this.clazzList=this.items_clazz
				this.please=false
				console.log(this.clazzList,"关闭弹框")
			},
			
			
			// 店铺商品分类
			// 商品分类一级
			shop_one(item){
				this.items_shopping=item
				this.shopping_name=item.cat_name
				let cat_id_one=""
				cat_id_one=this.shoppingClazz.filter((v,index)=>{
					if(item.cat_id==v.parent_id){
						return v
					}
				})
				if(cat_id_one.length==0){
					this.oneShopping=this.shoppingClazz.filter((v,index)=>{
						if(item.parent_id==v.parent_id){
							return v
						}
					})
					this.shop_one_show=true
					this.shopping_one=true
					this.shopping=false
					this.select=false
				}else{
					this.select=true
					this.twoShopping=cat_id_one
					this.shopping_one=false
					this.shopping_two=true
					this.shop_one_show=false
				}
				console.log(cat_id_one)
			},
			// 商品分类二级
			shop_two(item){
				this.items_shopping=item
				this.shopping_one_name=item.cat_name
				let cat_id_two=""
				cat_id_two=this.shoppingClazz.filter((v,index)=>{
					if(item.cat_id==v.parent_id){
						return v
					}
				})
				if(cat_id_two.length==0){
					this.threeShopping=this.shoppingClazz.filter((v,index)=>{
						if(item.parent_id==v.parent_id){
							return v
						}
					})
					this.shopping_two=true
					this.shop_one_show=false
					this.shop_two_show=true
					this.shopping_one=false
					this.select=false
					this.shopping=false
				}else{
					this.select=true
					this.threeShopping=cat_id_two
					this.shopping_two=false
					this.shopping_three=true
					this.shop_one_show=false
					this.shop_two_show=false
				}
			},
			// 商品分类三级
			shop_three(item){
				this.items_shopping=item
				this.shop_three_show=true
				this.shop_threeCatId=item.cat_id
				this.shopping_two_name=item.cat_name
				this.shopping=false
				this.select=false
			},
			// 切换一级
			shop_one_tab(items_shopping){
				this.shopping_one=true
				this.shopping_two_name=""
				this.shopping_one_name=""
				this.shop_three_show=false
				this.twoShopping=[]
				this.threeShopping=[]
				// 一级
				this.oneShopping=this.shoppingClazz.filter((item,index)=>{
					if(item.parent_id==0){
						return item
					}
				})
				let cat_id_two=""
				cat_id_two=this.shoppingClazz.filter((v,index)=>{
					if(items_shopping.cat_id==v.parent_id){
						return v
					}
				})
				if(cat_id_two.length==0){
					this.select=false
				}else{
					this.select=true
				}
			},
			// 切换二级
			shop_two_tab(items_shopping){
				this.shopping_one=false
				this.shopping_three=false
				this.shop_three_show=false
				this.shopping_two=true
				this.shopping_two_name=""
				
				let cat_id_two=""
				cat_id_two=this.shoppingClazz.filter((v,index)=>{
					if(items_shopping.cat_id==v.parent_id){
						return v
					}
				})
				if(cat_id_two.length==0){
					this.select=false
				}else{
					this.select=true
				}
			},
			shopList_popup(){
				this.shopList=this.items_shopping
				this.select=false
			},
			
			showToast(e) {
				this.$refs.uToast.show({
					title: e,
					type: 'default',
				})
			},
			// 名称
			name_input(e){
				this.goods_name=e.detail.value
			},
			// 商品货号
			sn_input(e){
				this.goods_sn=e.detail.value
			},
			// 商品单位
			units_input(e){
				this.goods_units=e.detail.value
			},
			
			// 库存
			stock_input(e){				
				this.stock=e.detail.value
			},
			// 商品关键字
			keywords_input(e){
				this.goods_keywords=e.detail.value
			},
			// 商品简单描述
			brief_input(e){
				this.goods_brief=e.detail.value
			},
			// 下一步
			next_sub(){
				if(this.userinfo.is_merchant){
					if(this.goods_name==''){
						this.showToast('请输入商品名称')
					}else if(this.clazzList==null||this.shopList==null){
						this.showToast('请选择商品分类')
					}else{
						uni.showLoading({
							title:"加载中",
							success: () => {
								this.$H.post("admin/merchant/goods/add",{
									goods_name:this.goods_name, // 名字
									stock:this.stock, // 库存
									bar_code:this.scancode, // 条形码
									goods_sn:this.goods_sn, // 货号
									goods_unit:this.goods_units, // 单位
									goods_keywords:this.goods_keywords, // 关键字
									goods_brief:this.goods_brief, // 商品描述
									category_id:this.clazzList.cat_id, // 平台商品分类
									merchant_category:this.shopList.cat_id // 商品分类
									}).then(res=>{
									this.$H.post("admin/goods/toggle/sale",{
										id:res.data.goods_id,
										type:"online",
									}).then(rest=>{
										let goods_id=res.data.goods_id
										uni.redirectTo({
											url:"/pages/goods-add-next/goods-add-next?goods_id="+goods_id
										})
										uni.hideLoading();
									})
								})	
							}
						})
						
					}
				}else{
					if(this.goods_name==''){
						this.showToast('请输入商品名称')
					}else if(this.clazzList==null){
						this.showToast('请选择商品分类')
					}else{
						uni.showLoading({
							title:"加载中",
							success: () => {
								this.$H.post("admin/merchant/goods/add",{
									goods_name:this.goods_name, // 名字
									stock:this.stock, // 库存
									bar_code:this.scancode, // 条形码
									goods_sn:this.goods_sn, // 货号
									goods_unit:this.goods_units, // 单位
									goods_keywords:this.goods_keywords, // 关键字
									goods_brief:this.goods_brief, // 商品描述
									category_id:this.clazzList.cat_id, //  平台商品分类
									}).then(res=>{
									this.$H.post("admin/goods/toggle/sale",{
										id:res.data.goods_id,
										type:"online",
									}).then(rest=>{
										let goods_id=res.data.goods_id
										uni.redirectTo({
											url:"/pages/goods-add-next/goods-add-next?goods_id="+goods_id
										})
										uni.hideLoading();
									})
								})	
							}
						})
						
					}
				}
			},
			
		},
		onLoad() {
			this.$H.post("admin/user/userinfo").then(res=>{
				this.userinfo=res.data
				console.log(res)
			})
			
			this.subCatId=1
			this.$H.post("admin/merchant/goods/category").then(res=>{
				this.terraceClazz=res.data
				this.terraceClazz.filter(v=>{
						return v.icon_show=false
				})
				// 一级
				this.oneClazz=this.terraceClazz.filter((item,index)=>{
					if(item.parent_id==0){
						return item
					}
				})
			})
			
			this.shop_subCatId=0
			this.$H.post("admin/merchant/goods/merchant/category").then(res=>{
				this.shoppingClazz=res.data
				this.shoppingClazz.filter(v=>{
					return v.icon_show=false
				})
				this.oneShopping=this.shoppingClazz.filter((item,index)=>{
					if(item.parent_id==0){
						return item
					}
				})
			})
		}
		
	}
</script>

<style>
	.icon_gray{
		/* width: 220upx;
		height: 220upx; */
	}
	.add_goods{
		width: 200upx;
		height: 200upx;
		border: 2px dashed #EAEAEA;
	}
	.icon_gray_camera{
		width: 100upx;
		height: 100upx;
	}
	
	.img{
		width: 200upx;
		height: 200upx;
	}
	.crop{
		width: 200upx;
		height: 200upx;
	}
	
	.s-popup-mask{
		background: rgba(204,204,204,0.3)!important;
	}
	.content{
		background-color:rgb(237,237,237)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #000;
	}
	.icon_share image{
		width: 120upx;
		height: 120upx;
	}
	
	.address{
		border-bottom: 1px solid #eaeaea;
	}
	.content_address{
		height: 100%;
	}
	.eradders{
		height: 185upx;
	}
	.active_tab{
		color: #ff3333;
		border-bottom: 3px solid #ff3333;
	}
	.active{
		color: #ff3333;
	}
	.icon_delete{
		width: 40upx;
		height: 40upx;
		z-index: 111;
	}
	.delete{
		z-index: 111;
		position: absolute;
		top: -10upx;
		right: -10upx;
	}
	.addition{
		width: 130upx;
		height: 130upx;
	}
</style>
